<div class="page page-widgets clearfix">

    <ol class="breadcrumb breadcrumb-small">
        <li>Home</li>
        <li class="active"><a href="#/widgets">Widgets</a>
        </li>
    </ol>

    <div class="page-wrap">
        <div class="row">
            <!-- profile widget -->
            <div class="col-md-4">
                <div class="widget-one panel panel-lined mb30">
                    <div class="panel-body">
                        <img src="images/photo-1.jpg" alt="user">
                        <p class="user-name text-light">Samuel Jackson</p>
                        <p class="small text-primary"><i class="fa fa-twitter"></i>&nbsp;@samuj</p>
                    </div>
                    <div class="panel-footer">
                        <ul class="list-unstyled clearfix">
                            <li class="col-xs-4">
                                <h4>300</h4>
                                <small>Followers</small>
                            </li>
                            <li class="col-xs-4">
                                <h4>35</h4>
                                <small>Following</small>
                            </li>
                            <li class="col-xs-4">
                                <h4>859</h4>
                                <small>Tweets</small>
                            </li>
                        </ul>
                    </div>
                    <!-- #end panel-footer -->
                </div>
            </div>
            <!-- #end profile widget -->

            <!-- minibox widget -->
            <div class="col-md-4">
                <div class="widget-two mb30 clearfix">
                    <div class="top-left">
                        <div class="icon fa fa-coffee text-primary"></div>
                        <div class="content">
                            <h4>30</h4>
                            <small>cups served</small>
                        </div>
                    </div>
                    <div class="top-right">
                        <div class="icon fa fa-clock-o text-warning"></div>
                        <div class="content">
                            <h4>1024</h4>
                            <small>hours of work</small>
                        </div>
                    </div>
                    <div class="bottom-left">
                        <div class="icon fa fa-shield text-danger"></div>
                        <div class="content">
                            <h4>4</h4>
                            <small>years of experience</small>
                        </div>
                    </div>
                    <div class="bottom-left">
                        <div class="icon fa fa-flask text-success"></div>
                        <div class="content">
                            <h4>300</h4>
                            <small>projects completed</small>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #end minibox widget -->


            <!-- list widget -->
            <div class="col-md-4">
                <div class="widget-three mb30">
                    <ul class="list-unstyled clearfix">
                        <li>
                            <i class="fa fa-file-o"></i>
                            <span class="text">File List</span>
                            <span class="badge badge-xs badge-primary right">100</span>
                        </li>
                        <li>
                            <i class="fa fa-comments-o"></i>
                            <span class="text">Messages</span>
                            <span class="badge badge-xs badge-info right">40+</span>
                        </li>
                        <li>
                            <i class="fa fa-bullhorn"></i>
                            <span class="text">Notifications</span>
                            <span class="badge badge-xs badge-success right">22</span>
                        </li>
                        <li>
                            <i class="fa fa-hdd-o"></i>
                            <span class="text">Bandwidth usage</span>
                            <span class="badge badge-xs badge-danger right">80%</span>
                        </li>
                        <li>
                            <i class="fa fa-microphone"></i>
                            <span class="text">Calls Attended</span>
                            <span class="badge badge-xs badge-info circle right">5</span>
                        </li>
                        <li>
                            <i class="fa fa-bookmark-o"></i>
                            <span class="text">Bookmarks Today</span>
                            <span class="badge badge-xs circle badge-warning right">2</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- #end list widget -->
        </div>
        <!-- #end row -->



        <div class="row">
            <!-- chat widget -->
            <div class="col-md-6">
                <div class="widget-four panel panel-lined mb30">
                    <div class="panel-heading"><i>Chat Box</i>
                    </div>
                    <div class="panel-body">
                        <!-- reply box -->
                        <div class="reply-msg clearfix mb30">
                            <div class="clearfix">
                                <img src="images/admin.jpg" alt="user" class="user left">
                                <div class="left">
                                    <div class="msg-box">
                                        <p>Hey, what's up bro? Are you free today.</p>
                                        <p>I've some work for you.</p>
                                    </div>
                                    <div class="time right small text-muted">2 min ago</div>
                                </div>
                            </div>
                        </div>
                        <!-- #end reply-box -->
                        <!-- send box -->
                        <div class="send-msg clearfix mb30">
                            <div class="clearfix">
                                <img src="images/photo-1.jpg" alt="user" class="user right">
                                <div class="right">
                                    <div class="msg-box">
                                        <p>I already have lots of work to do.</p>
                                    </div>
                                    <div class="time left small text-muted">just now</div>
                                </div>
                            </div>
                        </div>
                        <!-- #end send box -->
                    </div>

                    <div class="panel-footer">
                        <div class="input-group mb0">
                            <input type="text" class="form-control" placeholder="Type here...">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default fa fa-paper-plane"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #end chat widget -->


            <!-- share post widget -->
            <div class="col-md-6">
                <div class="widget-five mb30">
                    <textarea rows="5" class="form-control resize-v post-area" placeholder="Share your thoughts...."></textarea>
                    <ul class="post-tools list-unstyled clearfix">
                        <li>
                            <a href="javascript:;" class="fa fa-flask ion"></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="fa fa-microphone icon"></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="fa fa-file-image-o icon"></a>
                        </li>
                        <li class="right">
                            <button class="btn btn-primary">Post</button>
                        </li>
                </div>
            </div>
        </div>
        <!-- #end share post widget -->

    </div>
    <!-- #end row -->
</div>
<!-- #end page-wrap -->
</div>